<template>
  <view>
    <view class="time-line">
      <u-time-line>
        <view class="time-line-item">
          <u-time-line-item v-for="(data,index) in collects" :key="index" nodeTop="2">
            <template v-slot:node>
              <view class="u-node">
                <!-- 此处为uView的icon组件 -->
                <u-icon v-if="data.type === 1" name="word" color="#2979ff" custom-prefix="custom-icon" :size="50"/>
                <u-icon v-if="data.type === 2" name="PPT" color="#2979ff" custom-prefix="custom-icon" :size="50"/>
                <u-icon v-if="data.type === 3" name="excel" color="#2979ff" custom-prefix="custom-icon" :size="50"/>
                <u-icon v-if="data.type === 4" name="PDF" color="#2979ff" custom-prefix="custom-icon" :size="50"/>
              </view>
            </template>
            <template v-slot:content>
              <view>
                <view class="time-line-time">
                  <text class="time">{{ data.gmtCreate | dateTimeFormatter }}</text>
                </view>
                <view class="time-line-title" @click="collectClick(data,index)">{{ data.name }}</view>
              </view>
            </template>
          </u-time-line-item>
        </view>
      </u-time-line>
    </view>
    <u-loadmore :status="status" />
    <u-action-sheet :list="list1" @click="click1" v-model="show"></u-action-sheet>
    <u-popup v-model="show1" mode="top">
      <view class="popup">
        <view class="title">文件保存路径</view>
        <br>
        <view class="word-break">
          {{ content }}
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import download from "../../utils/downloader";
import {timestampFormat} from "../../utils/date";

export default {
  data() {
    return {
      list1:[{text: '在线预览'},{text: '下载'},{text: '删除'}],
      courseId: '',
      page: 1,
      status: '',
      total: 0,
      show1: false,
      content: '',
      collects: [],
      currentCollect: {},
      currentIndex: 0,
      show: false
    };
  },
  onLoad(){
    uni.$emit("setVuexUserInfo", {user: null, isLoginPage: false});
    this.initial();
  },
  onPullDownRefresh(){
    this.initial();
  },
  onReachBottom() {
    this.page = ++ this.page;
    this.status = 'loading';
    if((this.page - 1) * 10 > this.total) {
      setTimeout(() => {
        this.status = 'nomore';
      }, 1000)
    }else {
      this.getCollect().then(res => {
        this.total = res.total;
        this.dataFiles = this.collects.concat(res.data);
      });
      this.status = 'loadmore';
    }
  },
  methods: {
    initial(){
      this.page = 1;
      this.total = 0;
      this.getCollect().then(res => {
        this.total = res.total;
        this.collects = res.data;
        uni.stopPullDownRefresh();
      })
    },
    async getCollect(){
      return await this.$u.api.getCollect(this.page,this.$store.getters.id);
    },
    collectClick(data,index){
      this.currentCollect = data;
      this.currentIndex = index;
      this.show = true;
    },
    click1(index){
      if (index === 0){
        this.toFileShow(this.currentCollect);
      }else if (index === 1){
        download.load(this.currentCollect.path,this.currentCollect.name,false).then(([err,res]) => {
          if (err != null){
            this.$u.toast("出错啦，错误信息：" + err)
          }else {
            // #ifndef H5
            this.content = res.savedFilePath;
            this.show1 = true;
            // #endif
            console.log(res)
          }
        })
      }else {
        this.$u.api.removeCollect(this.currentCollect.id).then(res => {
          if (res.code === 200){
            this.collects.splice(this.currentIndex,1);
            this.$u.toast("删除成功");
          }
        })
      }
    },
    toFileShow(dataFile){
      let index = dataFile.path.lastIndexOf(".");
      let data = {
        name: dataFile.name,
        path: dataFile.path.substr(0,index)
      }
      uni.setStorage({
        key: 'pdf-url',
        data: JSON.stringify(data),
        success: (res) => {
          this.$u.route({
            url: 'pages/show_pdf/show_pdf'
          });
        },
        fail: (err) => {
          console.log(err)
          this.$u.toast("出错啦！");
        }
      })
    },
  },
  filters: {
    dateTimeFormatter:timestampFormat
  }
}
</script>

<style lang="scss">
.time-line {

  // #ifdef APP-PLUS || MP
  margin: 40rpx 0 100rpx 45rpx;
  // #endif
  // #ifdef H5
  margin: 40rpx 0 0 45rpx;
  padding-bottom: 70rpx;
  // #endif
  .time-line-item {
    .time-line-time {
      display: flex;
      justify-content: space-between;
      width: 400rpx;
      color: black;
      font-size: 28rpx;
      font-weight: bolder;
      margin-bottom: 30rpx;
    }

    .time-line-title {
      width: 650rpx;
      height: 50rpx;
      background-color: #FEF0F0;
      line-height: 50rpx;
      padding-left: 20rpx;
      color: #2979ff;
      font-size: 28rpx;
    }
  }
}
.popup{
  font-size: 40rpx;
  margin: 30rpx;
  .title {
    text-align: center;
    color: #2B85E4;
    margin-bottom: 20rpx;
  }
  .word-break{
    word-wrap: break-word;
  }
}
</style>
